<template>
	<view class="Column Flex ">
		<view style="width: 100%;display: flex; flex-direction:row;align-items: center;margin-top: 50upx; text-align: right;margin-right: 16upx;" @click="toUser()">
			<text class="Flex1"></text>
			<text style="font-size: 24upx;">联系客服</text>
			|
			<text style="font-size: 24upx;margin-right: 16upx;">注册会员</text>
		</view>

		<text class="margin70" style="margin-top: 100upx;font-size: 36upx;color: #000000;" >验证码登录</text>

		<input class="uni-input margin70" style="width: 80%; margin-top: 50upx;   border-bottom: #BBBBBB  solid 1upx;"  maxlength="11" v-model="phoneNumber" type="number" placeholder="请输入手机号" />
		<view class=" margin70 " style="width: 80%; display: flex; flex-direction:row; margin-top: 50upx; align-items: center;">
			<text style="font-size: 28upx; color: #EB162D ;" @click="toPasswordLogin()">密码登录</text>
			<text class="Flex1"></text>
			<button style="border-radius: 50upx; background: #EB162D ; color: #FFFFFF;font-size: 28upx;" @click="inputCode()">获取验证码</button>
		</view>

		<view class="margin70 " style=" margin-top: 150upx;display: flex; flex-direction: row; align-content: center;justify-content: center;text-align: center;">
			<view style="flex: 1; height: 1upx; background: #BBBBBB ; margin-top: 15upx;"></view>
			<text style="flex: 1; font-size: 24upx; color: #101010  ;">第三方登录方式</text>
			<view style="flex: 1; height: 1upx; background: #BBBBBB ;margin-top: 15upx;"></view>
		</view>

		<view style="margin-top: 50upx; width: 100%;display: flex; flex-direction:column; align-items: center;" @click="toLogin()">
			<image src="../../static/login/wx.png" style="height: 50upx; width: 50upx;"></image>
			<text style=" font-size: 20upx; color:#101010 ;">微信登录</text>
		</view>
	</view>
</template>

<script>
	var _self;
export default {
	data() {
		return {
			phoneNumber: '15185147706',
		};
	},
	onLoad: function(res) {
		_self = this; 
	},
	methods: {
		toLogin() {
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes.authResult);
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							// console.log('用户昵称为：' + infoRes.userInfo.);
							//   console.log('用户昵称为：' + infoRes.userInfo.nickName);
						}
					});
				}
			});
		}, 
		toPasswordLogin(){
			uni.redirectTo({
				url:'password_login'
			});
		}
		,inputCode(){
			if (_self.phoneNumber == '' || _self.phoneNumber.length < 11) {
				this.$message.showToast('请输入11位的手机号');
				return;
			}
			_self.getCode();
			
			
			
			
			
		},
		async getCode() {
			let data = {
				tel: _self.phoneNumber
			};
			this.$message.showLoading('获取验证码中...'); 
			let res = await this.$request.post(this.$api.xgsGetphoneCodeapi, data);
			this.$message.hideLoading();  
			if (res.code != 1) {
				this.$message.showToast(res.msg);
				return;
			}
			this.$message.showToast('获取验证码成功');
			uni.redirectTo({
				url:'code_input' 
			});
		}
		
	}
};
</script>

<style>
.magin-left {
	margin-left: 72upx;
}
</style>
